<template>
  <div class="left-sidebar">
    <div class="sidebar-header">
      <div class="logo-container">
        <div class="logo-circle">
          <div class="logo-inner">
            <span class="logo-icon">🎣</span>
          </div>
        </div>
        <div class="logo-text">圣刚钓鱼</div>
      </div>
    </div>

    <div class="sidebar-content">
      <!-- 有口么 -->
      <div 
        class="menu-item" 
        :class="{ active: activeMenu === 'yukoume' }"
        @click="yukoume"
      >
        <span class="menu-icon">🎯</span>
        <span>有口么</span>
      </div>

      <!-- 钓点圈 -->
      <div 
        class="menu-item" 
        :class="{ active: activeMenu === 'fishingCircle' }"
        @click="fishingCircle"
      >
        <span class="menu-icon">👥</span>
        <span>钓点圈</span>
      </div>

      <!-- 钓点库 -->
      <div 
        class="menu-item" 
        :class="{ active: activeMenu === 'fishingSpots' }"
        @click="fishingSpots"
      >
        <span class="menu-icon">🏞️</span>
        <span>钓点库</span>
      </div>

      <!-- 钓鱼活动 -->
      <div 
        class="menu-item" 
        :class="{ active: activeMenu === 'activities' }"
        @click="activities"
      >
        <span class="menu-icon">🏆</span>
        <span>活动</span>
      </div>

      <!-- 分隔线 -->
      <div class="menu-divider"></div>

      <!-- 用户管理 -->
      <div 
        class="menu-item" 
        :class="{ active: activeMenu === 'userManagement' }"
        @click="userManagement"
      >
        <span class="menu-icon">👥</span>
        <span>用户管理</span>
      </div>

      <!-- 报表管理 -->
      <div 
        class="menu-item" 
        :class="{ active: activeMenu === 'reports' }"
        @click="reports"
      >
        <span class="menu-icon">📊</span>
        <span>报表管理</span>
      </div>

      <!-- 积分设置 -->
      <div 
        class="menu-item" 
        :class="{ active: activeMenu === 'setting' }"
        @click="setting"
      >
        <span class="menu-icon">⭐</span>
        <span>设置</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 路由
const route = useRoute()
const router = useRouter()

// 当前激活的菜单项（基于路由）
const activeMenu = computed(() => {
  const path = route.path
  
  // 检查是否是详情页面
  if (path.startsWith('/circle-detail/')) {
    return 'fishingCircle'
  }
  if (path.startsWith('/spot-detail/')) {
    return 'fishingSpots'
  }
  if (path.startsWith('/favorites') || path.startsWith('/visits')) {
    return 'fishingSpots'
  }
  
  const mapping: Record<string, string> = {
    '/yukoume': 'yukoume',
    '/fishing-circle': 'fishingCircle',
    '/fishing-spots': 'fishingSpots',
    '/add-spot': 'addSpot',
    '/activities': 'activities',
    '/profile': 'profile',
    '/user-management': 'userManagement',
    '/reports': 'reports',
    '/points': 'points',
    '/favorites': 'fishingSpots',
    '/visits': 'fishingSpots',
    '/setting': 'setting'
  }
  return mapping[path] || 'yukoume'
})

// 搜索框配置
const pageSearchConfig = {
  yukoume: true,      // 有口么页面需要搜索
  fishingCircle: true,  // 钓点圈页面需要搜索
  fishingSpots: true,   // 钓点库页面需要搜索
  addSpot: false,      // 添加钓点页面不需要搜索
  activities: true,    // 钓鱼活动页面需要搜索
  CircleDetail: false  // 详情页面不需要搜索
}

// 方法定义
const yukoume = () => {
  router.push('/yukoume')
}

const fishingCircle = () => {
  router.push('/fishing-circle')
}

const fishingSpots = () => {
  router.push('/fishing-spots')
}

const addSpot = () => {
  router.push('/add-spot')
}

const activities = () => {
  router.push('/activities')
}

const userManagement = () => {
  router.push('/user-management')
}

const reports = () => {
  router.push('/reports')
}

const setting = () => {
  router.push('/setting')
}
</script>

<style scoped>
.left-sidebar {
  width: 187px;
  height: 100vh;
  background: var(--bg-sidebar);
  backdrop-filter: blur(10px);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-header {
  padding: 20px 8px;
  text-align: center;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.logo-circle {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-hover);
}

.logo-inner {
  width: 44px;
  height: 44px;
  background: var(--bg-tertiary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-icon {
  font-size: 20px;
  line-height: 1;
}

.logo-text {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.sidebar-content {
  flex: 1;
  padding: 15px 0;
  overflow-y: auto;
}

.sidebar-content::-webkit-scrollbar {
  width: 4px;
}

.sidebar-content::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-content::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 2px;
}

.menu-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 20px;
}

.menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid transparent;
}

.menu-item:hover {
  background: var(--bg-tertiary);
  transform: translateX(2px);
}

.menu-item:active {
  background: var(--bg-card);
  transform: translateX(0);
}

.menu-item.active {
  background: var(--bg-tertiary);
  color: var(--accent-primary);
  border-left-color: var(--accent-primary);
  font-weight: 600;
}

.menu-item.active .menu-icon {
  filter: drop-shadow(0 0 8px var(--accent-primary));
}

.menu-icon {
  font-size: 18px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.logout-item {
  color: var(--accent-danger);
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 16px;
}

.logout-item:hover {
  background: var(--bg-tertiary);
  color: var(--accent-danger-hover);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .left-sidebar {
    width: 133px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .left-sidebar.active {
    transform: translateX(0);
  }
}
</style>